<template>
	<view
		class="companyDetails"
		:style="{backgroundImage:'url(' + data.backgroundImage + ')'}"
	>
		<view class="companyConWhite">
			<!-- 企业LOGO -->
			<view class="companyLogo">
				<image :src="data.companyLogo" mode="aspectFit"></image>
			</view>
			
			<!-- 收藏分享 -->
			<view class="collect">
				<text class="iconfont" style="font-size:36rpx;">&#xe6ea;</text>
				<text>收藏</text>
				<text class="iconfont" style="font-size:32rpx;">&#xe655;</text>&nbsp;
				<text>分享</text>
			</view>
			
			<!-- 企业基本信息 -->
			<view class="companyInfo">
				<view class="companyInfoText1">中国铁道建筑集团有限公司</view>
				<view class="companyInfoText2">
					<text>官网：</text>
					<text class="vipText">成为VIP可看完整内容</text>
				</view>
				<view class="companyInfoText3">
					<text>国资委</text>
					<text>建筑、工程</text>
				</view>
			</view>
			
			<!-- 企业介绍 到 白底最后 -->
			<view class="companyBottom">
				
				<!-- 企业介绍 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon1.png" mode="aspectFit"></image>
						<text>企业介绍</text>
					</view>
					<!-- 内容 -->
					<view class="companyCon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{data.con1}}</view>
				</view>
				
				<!-- 福利待遇等 -->
				<view class="companyModel">
					<view class="companyModelTop">
						<!-- 第1排-3个-需要循环 -->
						<view
							v-for="(item,index) in data.list1"
							:key="index"
							class="companyModelTopCon"
							@tap="showModalFn(item.id)"
						>
							<image :src="item.img" mode="aspectFit"></image>
							<text>&nbsp;{{item.text}}&nbsp;&gt;</text>
						</view>
						
						<template v-for="(item,index) in data.modalList1" :key="index">
							<Modal
								v-if="showModal && currentModalId === item.id"
								v-model:visible="showModal" 
								@confirm="handleConfirm"
							>
								<view class="modalCon">
									<view class="modalTit">{{item.modalTitle}}</view>
									<view class="modalText">{{item.modalText}}</view>
								</view>
							</Modal>
						</template>
					</view>
					
					<view class="companyModelTop">
						<!-- 第2排-3个-需要循环 -->
						<template v-for="(item,index) in data.list2" :key="index">
							<view
								class="companyModelTopCon"
								@tap="showModalFn1(item.id)"
							>
								<image :src="item.img" mode="aspectFit"></image>
								<text>&nbsp;{{item.text}}&nbsp;&gt;</text>
							</view>
						</template>
						
						<ModalTwo 
							v-model:visible="showModal1" 
							@confirm="handleConfirm1"
						>
							<text>该内容为会员专属内容</text>
						</ModalTwo>
					</view>
				</view>
				
				<!-- 校招网申链接 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon2.png" mode="aspectFit"></image>
						<text>校招网申链接</text>
					</view>
					<!-- 内容 -->
					<text class="vipText" style="padding-left: 22rpx;">成为VIP可看完整内容</text>
					<view class="companyCon">{{data.con2}}</view>
				</view>
				
				<!-- 招聘地区 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon3.png" mode="aspectFit"></image>
						<text>招聘地区</text>
					</view>
					<!-- 内容 -->
					<view class="companyCon">{{data.con3}}</view>
				</view>
				
				<!-- 招考参考时间 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon4.png" mode="aspectFit"></image>
						<text>招考参考时间</text>
					</view>
					<!-- 内容 -->
					<view class="companyCon">{{data.con4}}</view>
				</view>
				
				<!-- 校招专业 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon5.png" mode="aspectFit"></image>
						<text>校招专业</text>
					</view>
					<!-- 内容 -->
					<text class="vipText" style="padding-left: 22rpx;">成为VIP可看完整内容</text>
				</view>
				
				<!-- 招考流程 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon3.png" mode="aspectFit"></image>
						<text>招考流程</text>
					</view>
					<!-- 内容 -->
					<view class="companyCon">{{data.con5}}</view>
				</view>
				
				<!-- 公司地址 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon6.png" mode="aspectFit"></image>
						<text>公司地址</text>
					</view>
					<!-- 内容 -->
					<view class="companyCon">{{data.con6}}</view>
				</view>
				
				<!-- 下属企业 -->
				<view class="companyTitle">
					<!-- 图标 和 标题 -->
					<view class="companyTitleCon">
						<image src="/static/conpany/companyIcon7.png" mode="aspectFit"></image>
						<text>下属企业</text>
					</view>
					<!-- 内容 -->
					<view class="companyCon" style="display: flex;flex-direction: column;">
						<text>中国建筑标准设计研究院有限公司</text>
						<text>中国城市发展规划设计咨询有限公司</text>
						<text>深圳华森建筑与工程设计顾问有限公司</text>
						<text>亚太建设科技信息研究院有限公司</text>
						<text>中设投资有限公司</text>
						<text>中设数字技术有限公司</text>
						<text>国家建筑绿色低碳技术创新中心</text>
						<text>建科公共设施运营管理有限公司</text>
						<text>新加坡CPG集团(境外)</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	import Modal from './components/Modal.vue';
	import ModalTwo from './components/ModalTwo.vue';
	const showModal = ref(false);
	const showModal1 = ref(false);
	
	const ipt_content = ref("");
	
	const currentModalId = ref(0); // 新增一个ref来记录当前点击的id
	const currentModalId1 = ref(0);
	
	const data = ref({
		backgroundImage:'/static/conpany/companyBg.png',
		companyLogo:'/static/conpany/companyLogo.png',
		con1:'中国铁道建筑集团有限公司的前身是中国人民解放军铁道兵，现为国务院国有资产监督管理委员会管理的特大型建筑企业，2007年11月5日在北京独家发起设立中国铁建股份有限公司(中文简称中国铁建，英文简称CRCC)，2008年3月10日、13日分别在上海和香港上市(A股代码601186、H股代码1186)，公司注册资本135.8亿元。中国铁建是全球最具实力、规模的特大型综合建设集团之2024年《财富》"世界500强企业“排名第43位，连续19年跻身世界500强。公司业务涵盖工程承包、规划设计咨询、投资运营、房地产开发、工业制造、物资物流、绿色环保、产业金融及其他新兴产业，经营范围遍及140多个国家和地区，是全球知名的建筑工程承包商、基础设施运营商、高端装备制造商、战新产业发展商。 公司具有科研、规划、勘察、设计、施工、监理、运营、维护和投融资完整的行业产业链，具备为客户提供一站式综合服务的能力。在高原铁路、高速铁路、高速公路、桥梁、隧道和城市轨道交通工程设计及建设领域确立了行业领导地位。拥有1名工程院院士、10名国家勘察设计大师、11名“吉千万人才工程”国家级人选和289名享受国务院特殊津贴的专家。累计获国家科学技术奖87项，中国土木工程詹天佑奖150项，国家优质工程奖593项(其中金奖52项)，中国建设工程鲁班奖184项，省部级T法5034项:累计拥有专利35832项。',
		con2:'发布时间：2024-08-30',
		con3:'全国',
		con4:'2024-08-30',
		con5:'网申——测评——笔试——面试——offer发放——签约',
		con6:'北京市海淀区复兴路40号',
		list1:[
			{
				id:1,
				img:'../../static/conpany/companyIcon01.png',
				text:'福利待遇'
			},
			{
				id:2,
				img:'../../static/conpany/companyIcon02.png',
				text:'录取数据'
			},
			{
				id:3,
				img:'../../static/conpany/companyIcon03.png',
				text:'对口院校',
			}
		],
		modalList1:[
			{
				id:1,
				modalTitle:'福利待遇',
				modalText:'试用期工资6000到6500元/月;首年年化收入9.5到15万元;境外地区适用境内薪酬标准的 2.5到3 倍;项目竣工有高额兑现奖;六险二金、津贴补贴'
			},
			{
				id:2,
				modalTitle:'录取数据',
				modalText:'未查到中国铁道建筑集团有限公司 2024 届校招明确的录取数据，但从其招聘信息中可获取以下相关内容:招聘岗位及专业工程技术类:土木工程、结构工程、市政工程、建筑环境与能源应用工程、给排水科学与工程、电气工程及其自动化、电气工程与智能控制、建筑学、工程力学、安全工程等.经济管理类:经济学、金融学、会计学、财务管理、工程造价、工程管理、物流管理等.党群行政类:哲学、法学、新闻学、汉语言文学人力资源管理、档案学、行政管理等.其他:土地资源管理、房地产类、广告策划、市场营销、工商管理、人力资源管理、企业管理、劳动与社会保障、劳动关系、新闻传播、马克思主义理论、法学、民商法等工作地点以北京、广州、天津、成部、西安、郑州、武汉、昆山等国内城市为各分子公司总部，并辐射境内二线城市;境外则分布在俄罗斯、马来西亚、未查到中国铁道建筑集团有限公司 2024 届校招明确的录取数据，但从其招聘信息中可获取以下相关内容:招聘岗位及专业工程技术类:土木工程、结构工程、市政工程、建筑环境与能源应用工程、给排水科学与工程、电气工程及其自动化、电气工程与智能控制、建筑学、工程力学、安全工程等.经济管理类:经济学、金融学、会计学、财务管理、工程造价、工程管理、物流管理等.党群行政类:哲学、法学、新闻学、汉语言文学人力资源管理、档案学、行政管理等.其他:土地资源管理、房地产类、广告策划、市场营销、工商管理、人力资源管理、企业管理、劳动与社会保障、劳动关系、新闻传播、马克思主义理论、法学、民商法等工作地点以北京、广州、天津、成部、西安、郑州、武汉、昆山等国内城市为各分子公司总部，并辐射境内二线城市;境外则分布在俄罗斯、马来西亚柬埔寨、孟加拉国、老挝、巴布亚新几内亚、秘鲁、斯里兰卡、中国澳门等数个国家或地区薪酬福利中铁建设集团有限公司试用期工资 6000-6500元月，试用期结束后首年年化收入 9.5-15 万元集团公司为录取者缴纳六险两金，并享受集团公司各种福利待遇，符合条件的优秀毕业生可解决北京、广州、天津等各大省会城市户口.'
			},
			{
				id:3,
				modalTitle:'对口院校',
				modalText:'中国铁道建筑集团有限公司校招的对口院校包括以下几类:重点综合类院校:985 高校:如清华大学、北京大学、哈尔滨工业大学、吉林大学、东北大学、大连理工大学、山东大学、武汉大学、华中科技大学、中南大学、湖南大学、东南大学、华南理工大学、重庆大学、四川大学、西安交通大学等。这些高校学科实力强劲，培养的学生综合素质高，中国铁道建筑集团在这些学校招聘，能够吸引到优秀的专业人才和管理人才为企业的发展提供智力支持。211 高校:北京交通大学、西南交通大学、河海大学、合肥工业大学、武汉理工大学、长安大学、中国矿业大学、中国石油大学(华东)等。这些院校在交通工程、土木工程、矿业工程等相关专业领域具有较强的学科优势和科研实力，与中国铁道建筑集团的业务需求紧密相关。建筑交通类专业院校:建筑类:沈阳建筑大学、吉林建筑大学、安徽建筑大学等。这类院校的建筑专业特色鲜明，在建筑设计、施工技术、工程管理等方面培养了大量专业人才，能够满足中国铁道建筑集团在建筑工程领域的人才需求。交通类:重庆交通大学、华东交通大学、大连交通大学等。交通类院校的交通运输、道路桥梁、铁道工程等专业，为中国铁道建筑集团的铁路、公路桥梁等交通基础设施建设项目提供了专业的技术人传统铁道院校:曾经的铁道兵相关院校以及具有铁道背景的院校，如石家庄铁道大学等，在铁道工程、铁路运输等方面具有深厚的历史积淀和专业优势，为中国铁道建筑集团输送了大量的专业技术人才和管理人才。'
			}
		],
		list2:[
			{
				id:1,
				img:'../../static/conpany/companyIcon04.png',
				text:'测评详情'
			},
			{
				id:2,
				img:'../../static/conpany/companyIcon05.png',
				text:'笔试详情'
			},
			{
				id:3,
				img:'../../static/conpany/companyIcon06.png',
				text:'面试详情'
			}
		]
	})
	
	const handleConfirm = () => {
	  uni.showToast({
	    title: '操作已确认',
	    icon: 'success'
	  });
	};
	
	const handleConfirm1 = () => {
	  uni.showToast({
	    title: '操作已确认1',
	    icon: 'success'
	  });
	};
	
	const showModalFn = (id:any) => {
	  currentModalId.value = id;
	  showModal.value = true;
	};
	
	const showModalFn1 = (id:any) => {
	  currentModalId1.value = id;
	  showModal1.value = true;
	};
</script>

<style scoped>
	@import url('../../static/fonts2/iconfont.css');
</style>
<style scoped>
.companyDetails {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding: 150rpx 30rpx 110rpx;
}
/* 白色内容区 */
.companyConWhite {
	width: 100%;
	background: #fff;
	border-radius: 26rpx;
	padding: 30rpx;
	position: relative;
}

.companyLogo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 180rpx;
	height: 180rpx;
	border-radius: 26rpx;
	background: #fff;
	position: absolute;
	top:-90rpx;
	left: 30rpx;
	border: 1px solid #ccc;
}
.companyLogo image {
	width: 150rpx;
	height: 150rpx;
}

/* 收藏分享 */
.collect {
	display: flex;
	justify-content: flex-end;
	padding: 8rpx 0;
	font-size: 28rpx;
}
.collect text:nth-child(2) {
	margin-right: 40rpx;
}

/* 企业基本信息 */
.companyInfo {
	margin-top: 30rpx;
	margin-bottom: 50rpx;
}
/* 企业标题 */
.companyInfoText1 {
	font-size: 45rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}
/* 官网 */
.companyInfoText2 {
	margin-bottom: 30rpx;
}
/* 成为vip可看完整内容 */
.vipText {
	color: #ffae6d;
}
/* 带颜色标签 */
.companyInfoText3 {
	margin-bottom: 30rpx;
}
.companyInfoText3 text {
	padding: 5rpx 30rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
}
.companyInfoText3 text:nth-child(1) {
	background: #e7f8f0;
	color: #19af6f;
	margin-right: 10rpx;
}
.companyInfoText3 text:nth-child(2) {
	background: #eaf4fe;
	color: #37a6fb;
}

/* 企业介绍 到 白底最后 */

/* 图标+标题 */
.companyTitle {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 20rpx;
}
/* 内容区 */
.companyTitleCon {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 30rpx;
}
/* 图片 */
.companyTitleCon image {
	width: 12%;
	height: 50rpx;
	margin-right: 10rpx;
}
/* 文字 */
.companyTitleCon text {
	font-size:34rpx ;
}
.companyCon {
	color: #88919a;
	padding-left: 18rpx;
	font-size: 26rpx;
	line-height: 40rpx;
	text-align: justify;
}
.companyCon text {
	padding-bottom: 16rpx;
	color: #000;
	font-size: 28rpx;
	text-decoration-line: underline;
}

/* 福利待遇 */
.companyModel {
	width: 100%;
}
.companyModelTop {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20rpx;
}

.companyModelTopCon {
	display: flex;
	align-items: center;
	padding: 30rpx 10rpx;
	border: 1px solid #a0a0a0;
	border-radius: 16rpx;
	font-size: 26rpx;
}
.companyModelTopCon image {
	width: 30rpx;
	height: 30rpx;
}

/* 模态框样式 */
.modalTit {
	display: flex;
	justify-content: center;
	font-size: 46rpx;
	margin-bottom: 50rpx;
	
}
.modalText {
	width: 90%;
	margin: 0 auto;
	text-align: justify;
}
</style>
